<template>
    <el-form ref="myForm" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="门店信息:" prop="storesInfo">
            <el-input v-model="formInline.storesInfo" placeholder="请输入门店名称/编号查询" />
        </el-form-item>
        <el-form-item label="订单信息:" prop="orderInfo">
            <el-input v-model="formInline.orderInfo" placeholder="请输入订单编号查询" />
        </el-form-item>
        <el-form-item label="用户信息:" prop="userInfo">
            <el-input v-model="formInline.userInfo" placeholder="请输入用户昵称/用户编号" />
        </el-form-item>
        <el-form-item label="商品名称:" prop="product">
            <el-input v-model="formInline.product" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="就餐方式:" prop="diningWay">
            <el-select v-model="formInline.diningWay" placeholder="全部">
                <el-option label="店内就餐" value="shanghai" />
                <el-option label="打包带走" value="beijing" />
            </el-select>
        </el-form-item>
        <div>
            <el-form-item label="付款方式:" prop="payment">
                <el-select v-model="formInline.payment" placeholder="全部">
                    <el-option label="微信支付" value="shanghai" />
                    <el-option label="余额支付" value="beijing" />
                </el-select>
            </el-form-item>
        </div>
        <el-form-item label="下单时间:" prop="orderTime">
            <el-col :span="11">
                <el-date-picker v-model="form.date1" type="date" style="width: 100%" />
            </el-col>
            <el-col :span="2" class="text-center">
                <span> 至 </span>
            </el-col>
            <el-col :span="11">
                <el-date-picker v-model="form.date2" type="date" style="width: 100%" />
            </el-col>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm">查询</el-button>
            <el-button @click="exportClick">导出</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="addorder">新增门店</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="filterTableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;"
        id="my-table">
        <el-table-column prop="id" label="订单编号" align="center" width="100" />

        <el-table-column prop="goodId" label="商品编号" align="center" width="100" />
        <el-table-column prop="shopName" label="门店名称" align="center" width="125" />
        <el-table-column prop="orderTime" label="下单时间" align="center" width="145" />
        <el-table-column prop="price" label="价格(元)" align="center" width="80" />
        <el-table-column prop="buyCounts" label="购买数量" align="center" width="80" />
        <el-table-column fixed="right" prop="operation" label="操作" align="center">
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)" plain>订单详情</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)" plain>订单删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 30]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="filterTableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />




    <UpdateTable @get-list="getTableList"></UpdateTable>
    <AddOrder @get-list="getTableList"></AddOrder>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from "vue"
import { ElForm, ElMessage, ElMessageBox } from 'element-plus'
import UpdateTable from "../components/OrderDetails.vue"
import http from '../util/api'
import { useStore } from 'vuex'
import * as XLSX from 'xlsx'
import FileSaver, { saveAs } from 'file-saver'
import AddOrder from "../components/AddOrder.vue"

const store = useStore()
//挂载时
onMounted(() => {
    getTableList()
})

//表格数据
const userList = ref<any>([])
// const loading = ref(false)
//获取住户信息
const getTableList = () => {
    // loading.value = true
    http('/order').then((res: any) => {
        // console.log(res.data);
        let data_list = res.data.map((array: any) => {
            let arr: any = {}
            if (array.isFinished === true && array !== '') {

                arr["shopName"] = array.shopName

            }
            return arr
        })
        data_list = data_list.filter((value: {}) => Object.keys(value).length != 0)
        // console.log(data_list);
        userList.value = res.data


        // loading.value = false
    }).catch((error) => {
        // loading.value = false
        ElMessage({
            type: 'error',
            message: '信息获取失败',
        })

    })
}

//分页器
//当前页数
const currentPage = ref(1)
//每页显示个数
const pageSize = ref(5)
//是否使用小型分页样式
const small = ref(true)
//是否禁用分页
const disabled = ref(false)
// 是否为分页按钮添加背景色
const background = ref(false)

//显示个数变化
const handleSizeChange = (val: number) => {
    pageSize.value = val
}

//页码改变
const handleCurrentChange = (val: number) => {
    currentPage.value = val
}

const formInline = reactive<any>({
    storesInfo: '',
    orderInfo: '',
    userInfo: '',
    product: '',
    diningWay: '',
    payment: ''

})
//搜索输入框
const submitForm = () => {
    console.log("查询");


}

//增加店铺功能
const addorder = () => {
    // store.commit('showAddEdit')
    store.commit('changeAddDialog')
}

// 重置表单
const myForm = ref<InstanceType<typeof ElForm>>()
const resetForm = () => {
    myForm.value?.resetFields()
}



interface User {
    date: string;
    name: string;
    address: string
}

//编辑信息功能
const handleEdit = (row: any) => {
    store.commit('showEdit', row)
    store.commit('changeDialog')

}

const handleDelete = (row: any) => {
    ElMessageBox.confirm(
        '确认删除该信息吗?',
        'Warning',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http(`/order/${row.id}`, 'delete').then((res: any) => {
            if (res.status === 200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                getTableList()
            } else {
                ElMessage({
                    type: 'error',
                    message: '删除失败！',
                })
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消！',
        })
    })
}
const form = ref({
    date1: "",
    date2: ""
})




//处理显示的数据
const filterTableData = computed(() => {
    // console.log("点击成功");
    let newKeyWord: any = []
    for (let i = 0; i < userList.value.length; i++) {
        if (userList.value[i].shopName.indexOf(formInline.storesInfo) > -1) {
            newKeyWord.push(userList.value[i])
        }
        // console.log(userList.value  )
    }
    return newKeyWord
})


// excel 导出
const exportClick = () => {
    var wb = XLSX.utils.table_to_book(document.querySelector('#my-table'));//关联dom节点
    /* get binary string as output */
    var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
    })
    try {
        FileSaver.saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
        }), 'test.xlsx')//自定义文件名
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout);
    }
    return wbout


};

</script>

<style lang="scss" scoped>
.text-center {
    text-align: center;
}
</style>